<template>
  <div>
    <div class="bg-color">Free Shipping For Orders Over $50</div>
    <div class="header">
      <div class="header-width">
        <div class="header-l">APROTY<span>.</span></div>
        <ul>
          <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
          <li>
            <img src="../assets/Index-(1)_03.gif" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <div class="banner">
      <img src="../assets/banner.gif" alt="" />
    </div>

    <div class="content">
      <div class="content-l">
        <img src="../assets/Index_03 (2).gif" alt="" />
      </div>
      <div class="content-c">
        <div class="top">
          <img src="../assets/Index_03.gif" class="f" />
          <img src="../assets/Index_05.gif" alt="" />
        </div>
        <div class="bottom">
          <img src="../assets/Index_11.gif" class="f" />
          <img src="../assets/Index_13.gif" alt="" />
        </div>
      </div>
      <div class="content-r">
        <img src="../assets/Index_07.gif" alt="" />
      </div>
    </div>
    <div class="title">Check Our Products</div>
    <div class="box">
      <div v-for="(item, index) in newArr" :key="index" class="minBox">
        <img :src="item.image" alt="" />
        <p>{{ item.text }}</p>
        <div>
          <s> {{ item.pre1 }}</s
          >{{ item.pre2 }}
        </div>
      </div>
    </div>

    <div class="block">
      <div class="blockCon">VIEW ALL PRODUCT</div>
    </div>
    <div class="b">
          <div class="foot">
        <p>Newsletter</p>
        <div>Get timely updates from your favorite products.</div>
      </div>
      <div class="input">
        <div class="inputBox">
          <input type="text" name="" placeholder="请输入关键字" />
          <div>搜索</div>
        </div>
      </div>
    </div>
    <div>
        <img src="../assets/Index_52.gif" alt="">
    </div>
    <div>
        <img src="../assets/footer_02.gif" alt="">
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["HOME", "SHOP", "BLOG", "PAGES", "CONTACT US"],
      newArr: [
        {
          image: require("../assets/Index_18.gif"),
          text: "Active Fleece Pants",
          pre1: "$14.95",
          pre2: "$10.00",
        },
        {
          image: require("../assets/Index_20.gif"),
          text: "Striped Stretchie",
          pre2: "$17.00",
        },
        {
          image: require("../assets/Index_22.gif"),
          text: "Layette Scratch",
          pre2: "$6.29",
        },
        {
          image: require("../assets/Index_24.gif"),
          text: "Water Repellent Parka",
          pre2: "$4.50",
        },
        {
          image: require("../assets/Index_26.gif"),
          text: "Bag With Braided Handle",
          pre2: "$16.00",
        },
        {
          image: require("../assets/Index_32.gif"),
          text: "Plain Scarf With Fringing",
          pre2: "$58.00",
        },
        {
          image: require("../assets/Index_33.gif"),
          text: "Feather Down Jacket",
          pre2: "$63.00",
        },
        {
          image: require("../assets/Index_34.gif"),
          text: "Plain Scarf With Fringing",
          pre2: "$62.00",
        },
        {
          image: require("../assets/Index_35.gif"),
          text: "The Frig T-Shirt",
          pre1: "$51.00",
          pre2: "$17.00",
        },
        {
          image: require("../assets/Index_36.gif"),
          text: "Against aging",
          pre2: "$60.00",
        },
        {
          image: require("../assets/Index_42.gif"),
          text: "Asymmetric Textured Cape",
          pre2: "$87.00",
        },
        {
          image: require("../assets/Index_43.gif"),
          text: "Hooded Cotton Cape",
          pre2: "$45.00",
        },
        {
          image: require("../assets/Index_44.gif"),
          text: "Sweatshirt With Pouch Pocket",
          pre2: "$93.00",
        },
        {
          image: require("../assets/Index_45.gif"),
          text: "Fine Knit Hat",
          pre1: "$51.00",
          pre2: "$41.00",
        },
        {
          image: require("../assets/Index_46.gif"),
          text: "Biker Hoodie",
          pre2: "$56.00",
        },
      ],
    };
  },
};
</script>
 
    <style>
* {
  margin: 0;
  padding: 0;
}

.bg-color {
  background: #f2f2f2;
  height: 48px;
  width: 100%;
  text-align: center;
  line-height: 48px;
}

.header {
  width: 100%;
  height: 88px;
  line-height: 88px;
  background-color: #fff;
  text-align: center;
}

.header-width {
  width: 60%;
  display: flex;
  justify-content: space-between;
  margin-left: 20%;
}

.header-l {
  font-weight: bold;
}

.header-l span {
  color: chocolate;
}

ul {
  width: 50%;
  height: 88px;
  line-height: 88px;
  display: flex;
  justify-content: space-between;
}

ul li {
  font-size: 14px;
  list-style: none;
}

ul li:nth-of-type(1) {
  color: #f40;
}

.content {
  width: 100%;
  padding: 60px 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.content-c {
  margin: 0 30px;
}

.top {
  margin-bottom: 32px;
}

.top,
.bottom {
  display: flex;
  justify-content: space-between;
}

.f {
  margin-right: 30px;
}

.title {
  width: 100%;
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}
.box {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.minBox {
  width: 19%;
}
.minBox p,
.minBox div {
  margin-top: 20px;
  text-align: center;
}
.minBox div s {
  color: #999;
}
.minBox div {
  margin-bottom: 20px;
}
.block {
  width: 100%;
  height: 188px;
  position: relative;
}
.blockCon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 250px;
  height: 60px;
  background: brown;
  text-align: center;
  line-height: 60px;
  color: #fff;
  border-radius: 3px;
}
.foot {
  margin-top: 20px;
}
.foot p {
  width: 100%;
  font-size: 25px;
  text-align: center;
  font-weight: bold;
}
.foot div {
    margin-top: 20px;
  width: 100%;
  text-align: center;
  color: #999;
}
.input {
  width: 100%;
  position: relative;
  margin-top: 80px;
}
.inputBox {
  width: 800px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
}
input {
  width: 700px;
  height: 50px;
}
.inputBox div {
  width: 52px;
  height: 54px;
  line-height: 54px;
  color: #fff;
  background: brown;
}
.b{
    padding: 80px 0;
    box-sizing: border-box;
    width: 100%;
    height: 360px;
    background: #fafafa;
}
</style>